<template>
  <div class="">
    <el-form ref="constant" :model="constant" label-width="110px">
      <el-form-item label="步骤名称" prop="name">
        <el-input v-model="constant.name"></el-input>
      </el-form-item>
      <div class="box" title="字段" style="margin-top:20px;">
        <el-row>
          <template>
            <u-table ref="tableField" :tableData="constant.fields" :tableHeader="columns" @removeObj="removeObj"></u-table>
          </template>
        </el-row>
        <el-row>
          <el-button class="el-table-add-row" icon="el-icon-plus" @click="addObj(1)">添加</el-button>
        </el-row>
     </div>
    </el-form>
    <div class="el-dialog__footer">
      <span class="dialog-footer">
          <el-button
            icon="el-icon-back"
            @click="cancel">取消
         </el-button>
        <el-button
          type="primary" icon="el-icon-check"
          @click="handleSaveData()">确定
        </el-button>
      </span>
    </div>
  </div>
</template>

<script>
import API from '../../../../../api/index'
// import TableFileds from '../../../table/table-fields.vue'
import TableFileds from '../../../table/table-fields.vue'
export default {
  name: 'Constant',
  props: {
    name: String
  },
  components: {
    'u-table': TableFileds
  },
  data () {
    return {
      count: 0,
      constant: {
        name: '',
        fields: []
      },
      temp: {
        name: '',
        fields: []
      },
      tempConstant: null,
      typeOptions: [],
      formatOptions: [],
      falgOptions: [{
        value: 'Y',
        label: '是'
      }, {
        value: 'N',
        label: '否'
      }],
      columns: [
        { prop: 'name', label: '名称', type: 'input' },
        { prop: 'type', label: '类型', type: 'select' },
        { prop: 'format', label: '格式', type: 'select' },
        { prop: 'length', label: '长度', type: 'input' },
        { prop: 'precision', label: '精度', type: 'input' },
        { prop: 'currency', label: '货币', type: 'input' },
        { prop: 'decimal', label: '10进制的', type: 'input' },
        { prop: 'nullif', label: '值', type: 'input' },
        { prop: 'group', label: '分组符号', type: 'input' },
        { prop: 'set_empty_string', label: '设为空串?', type: 'select' }
      ]
    }
  },
  methods: {
    loadData (data) {
      if (data) {
        this.$forceUpdate()
        this.constant = Object.assign({}, data)
        this.tempConstant = Object.assign({}, data)
      }
    },
    // 保存表单数据
    handleSaveData () {
      if (this.constant.name) {
        this.$emit('savePluginData', this.constant)
        this.constant = Object.assign({}, this.temp)
      } else {
        this.$message({
          message: '步骤名称必填',
          type: 'warning'
        })
      }
    },
    cancel () {
      this.$emit('cancel')
    },
    setGraph (val) {
      this.graph = val
    },
    getvalueFormats (param) {
      API.studio.valueFormats({'valueMetaName': param}).then(res => {
        this.formatOptions = res.data
      }).catch(error => {
        const errorResultData = error.response.data
        this.$message({
          message: errorResultData.error.message,
          type: 'warning'
        })
      })
    },
    getvalueMetas () {
      API.studio.valueMetas().then(res => {
        this.typeOptions = res.data
      }).catch(error => {
        const errorResultData = error.response.data
        this.$message({
          message: errorResultData.error.message,
          type: 'warning'
        })
      })
    },
     // 重置表单数据
    resetFormData (stepname) {
      this.$forceUpdate()
      this.$refs['constant'].resetFields()
      this.constant = Object.assign({}, this.temp)
      this.constant.name = stepname
    },
    addObj () {
      this.constant.fields.push({})
      this.$nextTick(() => {
        let container = this.$el.querySelector('.el-table__body-wrapper')
        container.scrollTop = container.scrollHeight
      })
    },
    removeObj (index) {
      this.constant.fields.splice(index, 1)
    },
    saveTempPluginData (formData) {
      this.$emit('saveTempPluginData', formData)
    }
  },
  mounted () {
    this.count = this.constant.fields.length
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 10px !important;
}

.box{
    position:relative;
    border:1px solid #dcdfe6;
    padding:30px 5px 10px 5px;
}
.box::before{
    content:attr(title);
    position:absolute;
    top: 0%;
    left:10%;
    transform:translateX(-50%);
    -webkit-transform:translate(-50%,-50%);
    padding:0px 10px;
    background-color:#fff;
}
.optionStyle button {
  margin: 0px
}
.el-dialog__footer {
  margin-top: 10px;
}
</style>
